onload = () => {
    loadCSS("../css/fontello.css", "bootstrap5-icon");
    loadCSS("../css/bootstrap5.min.css", "bootstrap5");
    loadScript("../js/bootstrap5.bundle.min.js")
        .then(() => loadScript("../js/crud.js")).then(() => {
        let userOperator = new Crud({
            module: "user",
            hasCheckbox: true,
            iterators: [{
                name: "user.status",
                iterator: [{"value": 0, "caption": "enable"}, {"value": 1, "caption": "disable"}]
            },
                {name: "user.type", iterator: [{"value": 0, "caption": "normal"}, {"value": 1, "caption": "virtual"}]}],
            opsButton: ["new", {
                "caption": "Assign to Role",
                "class": "btn btn-primary",
                "callback": (a, b, ids) => {
                    if (ids.length === 0) {
                        alert("Please choose the user you want to assign to Role.");
                        return;
                    }
                    let roleName = prompt("Please input the role name");
                    if (roleName) {
                        ajax(`/permission/user/assign`, {
                            method: "POST",
                            body: {roleName: roleName, userId: ids}
                        }, (data) => {
                            showToast(`${data.message}<br/>${JSON.stringify(data.data ?? [])}`, "primary")
                        }, (error) => showToast("Assign to role:[" + roleName + "] error caused by:" + error));
                    }
                }
            }],
            search: [{"caption": "Name", "type": "text", "name": "userName", class: "col-3"},
                {
                    "caption": "Type", "name": "type", "type": "combo", class: "col-3",
                    "iterator": "blank_ALL_user.type"
                }, {
                    "caption": "Status", "name": "status", "type": "combo", class: "col-3",
                    "iterator": "blank_ALL_user.status"
                }],
            listField: [{"caption": "ID", "field": "userId"}, {"caption": "Name", "field": "userName"},
                {"caption": "Email", "field": "email"}, {"caption": "Type", "field": "type", "iterator": "user.type"},
                {"caption": "Status", "field": "status", "iterator": "user.status"}],
            rowBtn: ["edit", {
                caption: "toggle status", class: "btn btn-info btn-sm", callback: (a, b) => {
                    b.status = (b.status === 0) ? 1 : 0;
                    ajax("/user/update", {method:"POST",body: b}, (data) => {console.log(data)})
                }
            }],
            editFields: [
                {"name": "userName", "placeHolder": "userName", "required": "required"},
                {"name": "firstName", "placeHolder": "firstName"},
                {"name": "lastName", "placeHolder": "lastName"},
                {"name": "initials", "placeHolder": "initials"},
                {"name": "displayName", "placeHolder": "displayName"},
                {"name": "description", "placeHolder": "description"},
                {"name": "phoneNumber", "placeHolder": "phoneNumber"},
                {"name": "email", "placeHolder": "email"},
                {"name": "commonName", "placeHolder": "commonName"},
                {"name": "gender", "placeHolder": "gender"},
                {"name": "street", "placeHolder": "street"},
                {"name": "postOfficeBox", "placeHolder": "postOfficeBox"},
                {"name": "district", "placeHolder": "district"},
                {"name": "city", "placeHolder": "city"},
                {"name": "state", "placeHolder": "state"},
                {"name": "country", "placeHolder": "country"},
                {"name": "postalCode", "placeHolder": "postalCode"},
                {"name": "type", "type": "combo", "iterator": "user.type"},
                {"name": "status", "type": "combo", "iterator": "user.status"}
            ]
        });
        userOperator.init()
    }).catch((err) => console.error(err));
}
